<template>
  <view>
    <!-- 商品列表渲染 -->
    <view v-if="cart.length" class="goods-list">
      <view class="cart-item" v-for="item in cart" :key="item.goods_id">
        <!-- radio 单选框 小程序组件库自带的 -->
        <!-- checkbox 复选框 -->
        <radio
          @click="changeCheck(item)"
          :checked="item.goods_checked"
          color="#EB4450"
        />
        <view class="cart-count">
          <!-- :name="" 暂时还没用, 等会儿修改数量时使用 -->
          <u-number-box
            :name="item.goods_id"
            :value="item.goods_number"
            @change="changeNumber"
            @overlimit="delGoods($event, item.goods_id)"
          />
        </view>
        <!-- hover-class="none" 取消链接组件按下时的灰色样式 -->
        <navigator
          class="goods-item"
          hover-class="none"
          :url="`/goodsPkg/goods_detail/goods_detail?goods_id=${item.goods_id}`"
        >
          <!-- 商品图片 -->
          <image
            class="goods-image"
            :src="item.goods_small_logo"
            mode="aspectFit"
          />
          <!-- 商品信息 -->
          <view class="goods-info">
            <view class="goods-name">{{ item.goods_name }}</view>
            <view class="goods-price">{{ item.goods_price }}</view>
          </view>
        </navigator>
      </view>
    </view>

    <u-empty
      margin-top="60"
      v-else
      mode="car"
      icon="http://cdn.uviewui.com/uview/empty/car.png"
    >
      <navigator
        class="bottom-btn"
        url="/pages/index/index"
        open-type="switchTab"
      >
        <u-button
          size="small"
          text="去逛逛吧"
          color="linear-gradient(to right, green, yellow)"
        ></u-button>
      </navigator>
    </u-empty>

    <!-- 底部操作栏占位 -->
    <view class="bottom-bar">
      <!-- 固定定位的操作栏  -->
      <view class="bottom-bar-fixed">
        <view class="select">
          <radio
            class="select-radio"
            @click="isAll = !isAll"
            :checked="isAll"
            color="#EB4450"
          >
            全选
          </radio>
          <text class="select-radio"></text>
        </view>
        <!-- 合计 -->
        <view class="total">
          <text class="total-name">合计：</text>
          <text class="total-price">{{ checkedPrice }}</text>
        </view>
        <!-- 结算 -->
        <view @click="goToPay" class="account">去结算({{ checkedTotal }})</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    // 计算属性的作用是根据内部依赖的数据, 自动计算出一个结果返回
    // ...mapState(['cartList'])
    ...mapGetters(["checkedTotal", "checkedPrice", "checkedCart"]),
    cart() {
      // 只要计算属性做了深拷贝, 那么修改计算属性中对象的属性值, 就不会影响到原数据, 自然也就不会触发计算属性的更新
      return JSON.parse(JSON.stringify(this.$store.state.cartList));
    },
    isAll: {
      get() {
        return this.cart.every((item) => item.goods_checked);
      },
      set(val) {
        // console.log(val)
        this.cart.forEach((item) => (item.goods_checked = val));
        this.$store.commit("updateCartList", this.cart);
      },
    },
  },
  methods: {
    changeCheck(item) {
      item.goods_checked = !item.goods_checked;
      // console.log(item.goods_checked)
      // 计算属性带缓存有关
      this.$store.commit("updateCartList", this.cart);
    },
    changeNumber({ value, name }) {
      // value 就是数量
      // name 就是 id
      const result = this.cart.find((item) => item.goods_id === name);
      result.goods_number = value;
      // 提交到 vuex
      this.$store.commit("updateCartList", this.cart);
    },
    async delGoods(type, id) {
      // console.log(type, id)
      if (type === "minus") {
        // 当用户点击 - 越界时
        const { cancel } = await uni.showModal({
          title: "提示",
          content: "您真的要删掉我吗?",
        });
        if (cancel) return;
        // 删除当前商品
        // 这种方法在此处不可行, 因为我们的计算属性没有 set
        // this.cart = this.cart.filter()
        // 传统方式: 根据 id 找到索引, 根据索引删除数据
        const index = this.cart.findIndex((item) => item.goods_id === id);
        this.cart.splice(index, 1);
        // 提交到 vuex
        this.$store.commit("updateCartList", this.cart);
      }
    },
    // checkAll() {
    //   // console.log(this.isAll)
    //   this.isAll = !this.isAll
    // }
    goToPay() {
      if (!this.checkedCart.length)
        return uni.showToast({ title: "请选择您心仪的商品", icon: "none" });
      uni.navigateTo({
        url: "/pages/pay/index",
      });
    },
  },
};
</script>

<style lang="scss">
// 商品列表
.goods-list {
  .goods-item {
    display: flex;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      // 垂直方向两端对齐
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        // 多行超出隐藏
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        // 前面的价格符号
        &::before {
          content: "￥";
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
// 购物车列表项
.cart-item {
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
  // 清除最后一项的底边
  &:last-child {
    border-bottom: none;
  }
  // 步进器外层盒子，定位实现
  .cart-count {
    position: absolute;
    // 体验优化细节：扩大盒子范围，防止用户误操作
    // background-color: pink;
    padding: 20rpx;
    bottom: 0;
    right: 0;
  }
}

// 底部操作栏
.bottom-bar {
  // 占位用
  height: 100rpx;
  // 定位的操作栏
  .bottom-bar-fixed {
    height: 80rpx;
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;

    border-top: 1px solid #eee;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20rpx;

    .select {
      .select-radio {
        font-size: 24rpx;
        color: #999;
      }
    }

    .total {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: 40rpx;
      .total-name {
        font-size: 24rpx;
      }

      .total-price {
        color: #eb4450;
      }
    }

    .account {
      background-color: #eb4450;
      color: #fff;
      font-size: 22rpx;
      width: 150rpx;
      height: 52rpx;
      border-radius: 26rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.bottom-btn {
  margin-top: 50rpx;
}
</style>